<template>
  <el-card header="机构信息" style="width:100%">
    <el-form label-width="120px" :disabled="isEdit">
      <el-row type="flex">
        <el-col>
          <el-form-item label="机构编号">
            <el-input v-model="orgizationInfo.id" disabled />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="机构名称">
            <el-input v-model="orgizationInfo.name" disabled />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="机构类型">
            <el-select :value="typeValue[orgizationInfo.type]" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- <orgAddress :orgization-info="orgizationInfo" /> -->
        <el-form-item label="机构地址">
          <el-row type="flex">
            <el-col>
              <el-select
                v-model="selectProvince"
                placeholder="请选择省"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in provinces"
                  :key="item.id"
                  size="small"
                  :label="item.name"
                  :value="item.name"
                  @click.native="changeProvince(item.id)"
                />
              </el-select>
            </el-col>
            <el-col style="margin:0 4px">
              <el-select
                v-model="selectCity"
                placeholder="请选择市"
                style="width: 100%"
                :disabled="selectProvince===''"
                clearable
              >
                <el-option
                  v-for="item in cities"
                  :key="item.value"
                  size="small"
                  :label="item.name"
                  :value="item.name"
                  @click.native="changeCity(item.id)"
                />
              </el-select>
            </el-col>
            <el-col><el-select
              v-model="selectArea"
              placeholder="请选择区"
              style="width: 100%"
              clearable
              :disabled="selectProvince==='' || selectCity===''"
            >
              <el-option
                v-for="item in area"
                :key="item.value"
                size="small"
                :label="item.name"
                :value="item.name"
              />
            </el-select></el-col>
          </el-row>
        </el-form-item>
      </el-row>
      <el-row type="flex">
        <el-col>
          <el-form-item label="详细地址">
            <el-input v-model="orgizationInfo.address" />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="经度">
            <el-input v-model="orgizationInfo.province.lng" disabled />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="纬度">
            <el-input v-model="orgizationInfo.province.lat" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col>
          <el-form-item label="机构负责人">
            <el-input v-model="orgizationInfo.managerName" />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="机构电话">
            <el-input v-model="orgizationInfo.phone" />
          </el-form-item>
        </el-col>
        <el-col />
      </el-row>
    </el-form>
    <el-row type="flex" justify="center">
      <el-button type="danger" style="width:89px;height:36px" @click="submitEdit">{{ isEdit?'编辑':'保存' }}</el-button>
    </el-row>
  </el-card>
</template>

<script>
import { getCityApi, getProvinceApi } from '@/api/ogization'
export default {
  props: {
    orgizationInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      typeValue: {
        1: '一级转运中心',
        2: '二级转运中心',
        3: '营业部'
      },
      isEdit: true,
      // 省市区
      provinces: [],
      cities: [],
      area: [],
      selectProvince: '',
      selectCity: '',
      selectArea: ''
    }
  },
  watch: {
    orgizationInfo: {
      deep: true,
      immediate: true,
      handler() {
        this.getProvince()
        this.selectProvince = this.orgizationInfo.province.name
        this.selectCity = this.orgizationInfo.city.name
        this.selectArea = this.orgizationInfo.county.name
      }
    }
  },
  methods: {
    // 编辑信息
    submitEdit() {
      this.isEdit = false
    },
    // 获取省份
    async getProvince() {
      // const res = await getProvinceApi()
      this.provinces = await getProvinceApi()
      this.cities = await getCityApi(this.orgizationInfo.province.id)
      this.area = await getCityApi(this.orgizationInfo.city.id)
    },
    // 获取城市
    async changeProvince(id) {
      const res = await getCityApi(id)
      this.cities = res
      this.selectCity = ''
      this.selectArea = ''
    },
    // 获取地区
    async changeCity(id) {
      const res = await getCityApi(id)
      this.area = res
      this.selectArea = ''
    }
  }
}
</script>

<style lang="scss" scoped>
 ::v-deep .el-form-item__label{
    font-weight: 700;
    color: #20232a !important;
  }
</style>
